<template>
  <div class="login d-flex justify-center align-center">
    <!-- 顶部信息栏  -->
    <v-sheet
      class="bar d-flex justify-end align-center"
      height="45"
      color="#0808084d"
    >
      <div class="pt-2">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <a v-bind='attrs' v-on='on'  href="https://gitee.com/onlypluto/image-cloud-disk"
              ><img src="@/assets/img/github.png"
            /></a>
          </template>
          <span>代码仓库</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <a v-bind='attrs' v-on='on'><img @click="contackMe = true" src="@/assets/img/weixin.png"/></a>
          </template>
          <span>联系维护者</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <a v-bind='attrs' v-on='on' href="https://www.alonepluto.info/free"
              ><img src="@/assets/img/find.png"
            /></a>
          </template>
          <span>发现更多</span>
        </v-tooltip>
        
      </div>
    </v-sheet>
    <!-- 对话框 -->
    <v-card
      class="box d-flex flex-column justify-center align-center"
      height="600"
      width="500"
      color="#00000060"
    >
      <!-- 登录对话框 -->
      <template v-if="!contackMe">
        <!-- 登录 -->
        <div v-if="type == 'login'" class="d-flex flex-column align-center">
          <img class="mt-n14 mb-10" src="@/assets/img/name4.png" />
          <div class="d-flex flex-column align-center">
            <v-text-field
              placeholder="请输入用户名"
              dense
              v-model="username"
              filled
              rounded
              background-color="#fafafa7c"
            ></v-text-field>
            <v-text-field
              placeholder="请输入密码"
              type="password"
              dense
              filled
              rounded
              background-color="#fafafa7c"
              v-model="password"
            ></v-text-field>
            <v-btn @click="login" width="150" rounded color="orange darken-1"
              >登录</v-btn
            >
          </div>
          <div class="bottom d-flex justify-space-around align-center">
            <a @click="tosignin">注册</a>
            <a @click="type = 'resetpassword' ">忘记密码</a>
          </div>
        </div>
        <!-- 注册 -->
        <div
          v-else-if="type == 'signin'"
          class="signin d-flex flex-column align-center "
        >
          <span class="label">注册</span>
          <v-text-field
            class="input"
            placeholder="请设置用户名"
            v-model="set_username"
            dense
            rounded
            filled
            clearable
            color="black"
            @blur="checkName"
            hint="用户名长度为5至15位"
            background-color="#fafafa7c"
          ></v-text-field>
          <v-text-field
            class="input"
            color="black"
            placeholder="请输入密码"
            v-model="set_password"
            type="password"
            dense
            rounded
            filled
            clearable
            hint="密码长度为6至18位"
            background-color="#fafafa7c"
          ></v-text-field>
          <v-text-field
            class="input"
            color="black"
            placeholder="请再次输入密码"
            v-model="set_password_again"
            type="password"
            dense
            rounded
            filled
            clearable
            background-color="#fafafa7c"
          ></v-text-field>
          <v-select
            class="input"
            :items="items"
            color="orange darken-2"
            label="请选择密保问题"
            v-model="question"
            dense
          ></v-select>
          <v-text-field
            class="input"
            color="black"
            placeholder="密保答案"
            v-model="answer"
            dense
            rounded
            filled
            clearable
            hint="答案最多20字"
            background-color="#fafafa7c"
          ></v-text-field>
          <div class="d-flex justify-space-around">
            <v-btn
              @click="cancel"
              width="130"
              rounded
              color="blue-grey lighten-4 mr-5"
              >取消</v-btn
            >
            <v-btn
              @click="signin"
              width="130"
              rounded
              color="orange darken-1 ml-5"
              >注册</v-btn
            >
          </div>
        </div>
        <!-- 重置密码 -->
        <div
          v-else
          class="resetpassword d-flex flex-column justify-start align-center"
        >
          <span class="label">重置密码</span>
          <div v-if="reset_type == 1" class="reset">
            <v-text-field
              class="input"
              placeholder="请输入用户名"
              v-model="username"
              dense
              color="black"
              clearable
              filled
              rounded
              background-color="#fafafa7c"
            ></v-text-field>
            <div class="d-flex justify-center">
              <v-icon
                class="mr-10"
                size="50"
                tag="button"
                @click="type = 'login'"
                color="grey lighten-1"
                >mdi-close-circle-outline</v-icon
              >
              <v-icon
                key="icon1"
                size="50"
                tag="button"
                @click="showQuestion"
                color="orange darken-2"
                >mdi-arrow-right-circle-outline</v-icon
              >
            </div>
          </div>
          <div
            v-else-if="reset_type == 2"
            class="reset d-flex flex-column justify-start align-center"
          >
            <span style="fontSize:30px">{{ question }}？</span>
            <v-text-field
              placeholder="请输入答案"
              v-model="resetpassword_answer"
              dense
              color="black"
              filled
              rounded
              clearable
              background-color="#fafafa7c"
            ></v-text-field>
            <div class="d-flex justify-center">
              <v-icon
                class="mr-10"
                size="50"
                tag="button"
                @click="(type = 'login'), (reset_type = 1)"
                color="grey lighten-1"
                >mdi-close-circle-outline</v-icon
              >
              <v-icon
                key="icon2"
                size="50"
                tag="button"
                @click="showReset"
                color="orange darken-2"
                >mdi-arrow-right-circle-outline</v-icon
              >
            </div>
          </div>
          <div
            v-else
            class="reset d-flex flex-column justify-start align-center"
          >
            <v-text-field
              placeholder="请输入密码"
              v-model="set_password"
              type="password"
              dense
              color="black"
              filled
              rounded
              clearable
              background-color="#fafafa7c"
              hint="密码长度为6至18位"
            ></v-text-field>
            <v-text-field
              placeholder="请再次输入密码"
              v-model="set_password_again"
              type="password"
              dense
              color="black"
              filled
              rounded
              clearable
              background-color="#fafafa7c"
            ></v-text-field>
            <div class=" d-flex justify-space-around">
              <v-btn
                @click="cancel"
                width="130"
                rounded
                color="blue-grey lighten-4 mr-5"
                >取消</v-btn
              >
              <v-btn
                @click="reset"
                width="130"
                rounded
                color="orange darken-1 ml-5"
                >重置</v-btn
              >
            </div>
          </div>
        </div>
      </template>
      <!-- 联系项目维护者 -->
      <template v-else>
        <div class="contact-box d-flex flex-column align-center">
          <h1 style="color:#F57C00">联系项目维护者</h1>
          <img src="@/assets/img/weixin.jpeg" />
          <v-btn
            @click="contackMe = false"
            width="150"
            rounded
            color="orange darken-1"
            >关闭</v-btn
          >
        </div>
      </template>
    </v-card>
  </div>
</template>

<script>
import { http } from "@/utils/http.js";
import SparkMD5 from "spark-md5";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      //控制功能显示
      type: "login",
      //用户设置的用户名
      set_username: "",
      // 用户设置的密码
      set_password: "",
      set_password_again: "",
      // 密保问题列表，用于注册
      items: [],
      // 根据用户名获取的密保问题
      question: "",
      //密保问题的答案
      answer: "",
      //重置密码时用户输入的密保问题答案
      resetpassword_answer: "",
      // 重置密码的步骤，第1步输入用户名，第2步回答密保问题，第3步重置密码
      reset_type: 1,
      // 控制登录对话框和联系维护者对话框的切换
      contackMe: false,
    };
  },
  methods: {
    //登录
    async login() {
      if (this.username === "" || this.password === "") {
        this.$store.commit("message", {
          color: "error",
          text: "用户名或密码不能为空",
        });
        return;
      }
      const config = {
        url: "/login/login",
        method: "post",
        data: {
          user_name: this.username,
          user_password: SparkMD5.hash(this.password),
        },
      };
      //发送网络请求
      const result = await http(config);
      switch (result.data.code) {
        case 802:
          //登录成功
          this.$store.commit("login", {
            user: result.data.data.user,
            token: result.data.data.token,
            folders: result.data.data.folders,
          });
          //跳转到home页
          this.$router.push("/home/timeline");
          this.$store.commit("message", {
            color: "success",
            text: "欢迎来到miss Yo",
          });
          break;
        case 803:
          //无此用户
          this.$store.commit("message", {
            color: "error",
            text: "用户不存在，请前往注册页",
          });
          break;
        case 804:
          // 密码错误
          this.$store.commit("message", { color: "error", text: "密码错误" });
          break;
        default:
          break;
      }
    },
    //前往注册页面
    async tosignin() {
      this.type = "signin";
      //请求密保问题列表
      const config = {
        url: "/login/getquestions",
        method: "get",
      };
      const result = await http(config);
      this.items = result.data.data;
    },
    //检测用户名
    async checkName() {
      if (/[^1-9A-Za-z]/.test(this.set_username)) {
        this.$store.commit("message", {
          color: "error",
          text: "用户名包含非法字符",
        });
        return false;
      }
      if (this.set_username.length < 5 || this.set_username > 15) {
        this.$store.commit("message", {
          color: "error",
          text: "用户名长度错误",
        });
        return false;
      }
      const config = {
        url: "/login/checkname",
        method: "post",
        data: {
          user_name: this.set_username,
        },
      };
      const result = await http(config);
      if (result.data.code === 809) {
        this.$store.commit("message", { color: "error", text: "用户名已存在" });
        this.set_username = "";
      }
    },
    //取消
    cancel() {
      this.type = "login";
      this.reset_type = 1;
      this.set_username = this.set_password = this.set_password_again = this.question = this.answer ="";
    },
    //注册
    async signin() {
      if (this.set_username.length < 5 || this.set_username > 15) {
        this.$store.commit("message", {
          color: "error",
          text: "用户名长度错误",
        });
        return false;
      }
      if (this.set_password !== this.set_password_again) {
        this.$store.commit("message", {
          color: "error",
          text: "两次输入的密码不一致",
        });
        return false;
      }
      if (this.answer.length > 20) {
        this.$store.commit("message", {
          color: "error",
          text: "密保答案不可超过20字",
        });
        return false;
      }
      const config = {
        url: "/login/signin",
        method: "post",
        data: {
          user_name: this.set_username,
          user_password: SparkMD5.hash(this.set_password),
          user_question: this.question,
          user_answer: this.answer,
          mock: "mock",
        },
      };
      const result = await http(config);
      if (result.data.code === 820) {
        //注册成功
        this.type = "login";
        this.username = this.set_username;
        this.set_username = this.set_password = this.set_password_again = this.question = this.answer =
          "";
        this.$store.commit("message", { color: "success", text: "注册成功" });
      } else {
        this.$store.commit("message", {
          color: "error",
          text: result.data.message,
        });
      }
    },
    // 重置密码-请求用户密保问题
    async showQuestion() {
      const config = {
        url: "/login/getuserquestion",
        method: "get",
        params: {
          user_name: this.username,
        },
      };
      const result = await http(config);
      this.question = result.data.data.user_question;
      this.answer = result.data.data.user_answer;
      this.reset_type = 2;
    },
    // 重置密码-验证密保问题
    async showReset() {
      if (this.answer !== this.resetpassword_answer) {
        this.$store.commit("message", { color: "error", text: "密保答案错误" });
        return false;
      }
      this.reset_type = 3;
    },
    //重置密码
    async reset() {
      if (this.set_password !== this.set_password_again) {
        this.$store.commit("message", {
          color: "error",
          text: "两次输入的密码不一致",
        });
        return false;
      }
      const config = {
        url: "/login/resetpassword",
        method: "post",
        data: {
          user_name: this.username,
          user_password: SparkMD5.hash(this.set_password),
        },
      };
      const result = await http(config);
      if (result.data.code === 808) {
        //修改成功
        this.type = "login";
        this.reset_type = 1;
        this.resetpassword_answer = "";
        this.set_password = this.set_password_again = "";
        this.$store.commit("message", {
          color: "success",
          text: "密码重置成功",
        });
      } else {
        //修改失败
        this.$store.commit("message", { color: "error", text: "重置密码失败" });
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background-image: url("../assets/img/bg1.jpg");
  background-size: cover;
}
//顶部信息栏
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  div {
    display: flex;
    align-items: center;
    img {
      margin: 0px 15px;
      height: 28px;
      width: 28px;
    }
  }
}
//对话框样式
.box {
  position: relative;
  div {
    width: 80%;
    margin: 20px 0px;
  }
  img {
    width: 450px;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: inherit;
    height: 50px;
  }
}
.signin,
.resetpassword {
  .label {
    color: var(--theme-color);
    font-size: 60px;
  }
}
.reset {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.input {
  height: 30px;
}
.contact-box {
  img {
    height: 300px;
    width: 300px;
    margin: 70px 0px;
  }
}
</style>
